<template>
  <div>
    <p>{{ title }}</p>
    <p v-for="item in user" :key="item">{{ item }}</p>
    <p>{{ msg }}</p>
    <!-- 自定义的button 子传父 -->
    <button @click="emit('sonEmit',1,'string',{name:'小强'})">
      emit触发父组件绑定子组件上的函数
    </button>
    <button @click="editTitle">
      emit触发父组件绑定子组件上的函数
    </button>
    <!-- 触发多个事件 -->
    <button @click="triggerEvent1">Trigger Event 1</button>
    <button @click="triggerEvent2">Trigger Event 2</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
export interface Iuser {
  id?:number
  name: string;
  age: number;
  sex: string;
}
//定义事件
const emit = defineEmits(['sonEmit','sonEmit2','event1', 'event2'])
//响应式Props解构 3.5
const {
  title = '江山如此多娇',
  user,
  msg,
} = defineProps<{
  title?: string;
  user: Iuser;
  msg?: string;
}>();
const tle = ref(title)
const editTitle = () => {
  tle.value = '数风流人物,还看今朝'
  emit('sonEmit2')
}
// 触发多个事件
const triggerEvent1 = () => {
  emit('event1', 'data for event1')
}
const triggerEvent2 = () => {
  emit('event2', 'data for event2')
}
</script>
